

<template>
  <div style="width: 100%;height: 100%;">
      <a-row style="text-align: left;">
        <a-col :span="4">
          <span>数据库名：{{ databaseName }}</span>
        </a-col>
        <a-col :span="8">
          <span>表名：</span>
          <a-select
            v-model:value="tableName"
            style="width: 150px"
            placeholder="选择表"
            :options="tableNamesOption"
            @change="handleChange"
          ></a-select>
        </a-col>
        <a-col :span="8">
          <span>前后端代码：</span>
          <a-select
            v-model:value="frontBackVal"
            style="width: 150px"
            placeholder="选择代码类型"
            :options="frontBackOption"
          ></a-select>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="autoCode" :disabled="tableName.length ==0">代码生成</a-button>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :dataSource="tableData"
        bordered
        :pagination="false"
        :scroll="{ x: '100%',y:600 }"
        style="margin-top: 10px;"
      ></a-table>
  </div>

</template>
<script setup lang="ts">
import { saveAs } from "../util/fileSaver.js";
import { getBackCodeStr } from "../util/getFileBackCodeStr.js";
import { getFrontCodeStr } from "../util/getFileFrontCodeStr.js";
import { ref,watch,onMounted } from 'vue'
import { defHttp } from '../axios';
const frontBackOption = ref([{label:"前端",value:"front-end"},{label:"后端",value:"back-end"}])
const frontBackVal = ref("back-end")
const databaseName = ref("")
const tableNamesOption = ref([])
const tableName = ref("")
const columns = ref([{title:'字段名',dataIndex:'Field',key:'Field'},{title:'数据类型',dataIndex:'Type',key:'Type'},{title:'默认值',dataIndex:'Default',key:'Default'},{title:'主键',dataIndex:'Key',key:'Key'},{title:'注释',dataIndex:'Extra',key:'Extra'}])
const tableData = ref([])
const handleChange = (val)=>{
  debugger
  tableName.value = val
  defHttp.post("/getTableColumns",{tableName:val},{}).then(res=>{
    tableData.value = res.data
  })
}
// 主键
const getPriKey = ()=>{
  let res = ""
  tableData.value.map(item =>{
    if(item.Key == "PRI"){
      res = item.Field
    }
  })
  return res
}  
const getAllColumnsKey = ()=>{
  return tableData.value.map(item =>{
    return item.Field
  })
}
//生成 前端代码
const frontEndCode = ()=>{
  const textContent =getFrontCodeStr(tableName.value,getPriKey(),getAllColumnsKey())
  const blob = new Blob([textContent], { type: "text/plain;charset=utf-8" });
  saveAs(blob, tableName.value+".vue");

}

//生成后端代码
const backEndCode = ()=>{
  const textContent =getBackCodeStr(tableName.value,getPriKey(),getAllColumnsKey())
  const blob = new Blob([textContent], { type: "text/plain;charset=utf-8" });
  saveAs(blob, tableName.value+".js");
  const text = "将文件位置放置在 server/controllerImplement/ 目录下 +\n" +
                "在/util.router.js中添加如下引入和配置：(注意是添加不是替换)\n" +
                "import * as "+tableName.value.toLowerCase()+"Util from '../controllerImplement/"+tableName.value.toLowerCase()+".js'     \n" +
                "const routerOptions = [{url:'/"+tableName.value.toLowerCase()+"/',implement:"+tableName.value.toLowerCase()+"Util}]" 
                const blob2 = new Blob([text], { type: "text/plain;charset=utf-8" });
  saveAs(blob2,"使用说明.txt");
}
// 代码生成
const autoCode = ()=>{
  debugger
  if(frontBackVal.value == "front-end"){
    frontEndCode()
  }else{
    backEndCode()
  }              
}
onMounted(()=>{
  defHttp.get("/getTables",{},{}).then(res=>{
    const data = res.data
    let tmpArray = []
    if(Array.isArray(data) && data.length > 0){
      data.map(item =>{
        for(const key in item){
          databaseName.value = key.split('_')[2]
          tmpArray.push({label:item[key],value:item[key]})
        }
      })
    }
    tableNamesOption.value = tmpArray
  })

  })
</script>
<style scoped>

</style>
